<template>
    <div class="main ">
        <div class="n">
            <div class="one three">
                <div class="t-title">&nbsp;</div>
                <div class="t-main">
                    <div class="t-m-l-r">
                        <div>
                            <div class="lr-item-box" v-for="(item, k) in props.data.sub" :key="k">
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.generation">{{
                                            item.generation }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.sex">{{
                                            item.sex }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.rank">{{
                                            item.rank }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.introduction">{{
                                            item.introduction }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.zhi">{{
                                            item.zhi }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.hao">{{
                                            item.hao }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.zhiName">{{
                                            item.zhiName }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.formerName">{{
                                            item.formerName }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.ethnicity">{{
                                            item.ethnicity }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.phone">{{
                                            item.phone }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.education">{{
                                            item.education }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.occupation">{{
                                            item.occupation }}
                                    </div>

                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.marriage">{{
                                            item.marriage }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.homeAddress">{{
                                            item.homeAddress }}
                                    </div>
                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.nativePlace">{{
                                            item.nativePlace }}
                                    </div>

                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.birthAddress">{{
                                            item.birthAddress }}
                                    </div>

                                    <div class="lr-item" :style="{ fontWeight: '400', fontSize: '15px' }"
                                        v-if="item.otherInfo">{{
                                            item.otherInfo }}
                                    </div>


                                    <div class="lr-item" v-for="(data, k) in item.children" :key="k"
                                        :style="{ fontWeight: '400', fontSize: '15px' }">{{
                                            data.nameAll }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="two">
                    <div class="top">{{ props.data.bookName }}</div>
                    <div class="bottom">
                        <div class="s">
                            <div class="s-b y">
                                <img src="/src/assets/image/l.png">
                            </div>
                            <div class="s-b e">
                                <img src="/src/assets/image/r.png">
                            </div>
                        </div>
                        <div class="t-one">卷{{ props.data.volumesNum }}</div>
                        <div class="t-two">{{ props.data.xiName }}</div>
                        <div class="t-two t-three">{{ props.data.pageNum }}</div>
                        <div class="t-four">{{ props.data.tangHao }}</div>
                    </div>
                </div>
                <div class="three">
                    <div class="t-title">{{ props.data.fname || '暂无' }}</div>
                    <div class="t-main">
                        <div class="t-m-l-r">
                            <div>
                                <div class="lr-item-box" v-for="(item, k) in props.data.sub" :key="k">
                                    <div class="lr-item" :key="k">{{ item.birthday || '未知' }}</div>

                                    <div v-if="item.spouse" class="lr-item"
                                        :style="{ fontWeight: '900', fontSize: '17px' }" :key="k">{{
                                            item.spouse.nameAll || '未知' }}</div>
                                    <div v-if="item.spouse" class="lr-item" :key="k">{{
                                        item.spouse.birthday || '未知' }}</div>

                                </div>
                            </div>
                            <div>
                                <div class="lr-line">
                                    <div class="lr-line-c">
                                    </div>
                                </div>
                                <div class="bl-item-box">
                                    <div class="bl-item" v-for="(item, index) in props.data.sub" :key="index">
                                        <template v-for="(i, k) in item.children" :key="k">
                                            <div class="bl-item" v-if="item.children.length">
                                                <div class="xian"></div>
                                                <div class="yuan"></div>
                                                <div class="bl-text">{{ i.nameAll || '暂无' }}</div>
                                                <div class="son" v-for="(n, m) in i.children" :key="m">{{ n.nameAll ||
                                                    '暂无'
                                                    }}
                                                </div>
                                            </div>
                                        </template>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="t-main-left">
                            <div class="t-m-l-l">
                                <div class="ll-item" v-for="(item, index) in props.data.sub" :key="item">
                                    <div class="line" v-if="index != 0"></div>
                                    <div class="y"></div>
                                    <div class="ll-txt">{{ item.lastName }}公</div>
                                </div>
                            </div>
                        </div>
                        <div class="t-main-right">
                            <div class="t-item" v-for="(item, index) in props.data.sub" :key="index">
                                <div class="t-txt">{{ item.generation }}世</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="four">
                <div class="title">手海公支派可计工资下是戏图</div>
            </div> -->
            </div>
        </div>
</template>

<script setup>
const props = defineProps({
    data: Object
})
</script>
<style lang="scss" scoped>
.main {
    border: 5px solid #000;
    padding: 3px;
    height: 100%;

    .n {
        height: 100%;
        border: 2px solid #000;
        display: flex;
        justify-content: space-between;

        .one {
            flex: 4;
        }

        .two {
            flex: 0.5;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            display: flex;
            flex-direction: column;
            align-items: center;

            .top {
                border-bottom: 2px solid #000;
                writing-mode: vertical-lr;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px 0;
                flex: 1;
                font-size: 25px;
                font-weight: 900;
            }

            .s {
                width: 100%;

                .y,
                .e {
                    top: 0;
                    position: absolute;
                }

                .y {
                    left: 0;
                }

                .e {
                    right: 0;
                }

                .s-b {
                    width: 22px;
                    height: 22px;
                    display: flex;
                    align-items: center;

                    img {
                        width: 22px;
                        height: 22px;
                    }
                }

            }

            .bottom {
                position: relative;
                flex: 4;
                writing-mode: vertical-lr;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 0;
                width: 100%;

                .t-one {
                    font-weight: 900;
                    font-size: 20px;
                }

                .t-two {
                    font-size: 15px;
                }
            }
        }

        .three {
            flex: 4;

            .t-title {
                border-bottom: 2px solid #000;
                text-align: right;
                font-size: 15px;
                padding: 15px 30px 10px 0;
            }

            .t-main {
                display: flex;

                .t-m-l-r {
                    flex: 4;
                    display: flex;
                    flex-direction: column;
                    // justify-content: space-between;
                    padding: 20px 0;


                    .lr-item-box:last-child {
                        margin-bottom: 0 !important;
                    }

                    .lr-item-box:last-child {
                        border: none !important;
                    }

                    .bl-item-box {
                        display: flex;
                        //align-items: center;

                        .bl-item:first-child {
                            // margin-right: 0;
                        }

                        .bl-item {
                            margin: 0 30px;
                            display: flex;
                            //justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            position: relative;

                            .son {
                                position: absolute;
                                left: -20px;
                                bottom: -10px;
                                font-size: 15px;
                                writing-mode: vertical-lr;
                            }

                            .yuan {
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                border: 1px solid #000;
                            }

                            .xian {
                                width: 1px;
                                height: 15px;
                                background-color: #000;
                            }

                            .bl-text {
                                font-size: 20px;
                                font-weight: 900;
                                writing-mode: vertical-lr;
                            }
                        }
                    }

                    .lr-line {
                        display: flex;
                        justify-content: flex-end;
                        background-color: #000;

                        .lr-line-c {
                            width: 75%;
                            background-color: #000;
                            height: 1px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;


                        }

                    }

                    .lr-item-box {
                        min-height: 120px;
                        max-height: 120px;
                        border-bottom: 2px solid #000;
                        padding-bottom: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-bottom: 10px;


                        .lr-item {
                            writing-mode: vertical-lr;
                            font-size: 18px;
                            margin: 0 5px;
                        }
                    }
                }

                .t-main-left {
                    flex: 1;
                    display: flex;
                    // flex-direction: column;
                    justify-content: center;
                    // align-items: center;
                    margin-top: 20px;
                    padding-right: 20px;

                    .t-m-l-l {

                        flex: 1;


                        .ll-item {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;

                            .line {
                                width: 1px;
                                height: 100px;
                                max-height: 100px;
                                background-color: #000;
                            }

                            .y {
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                border: 1px solid #000;
                            }

                            .ll-txt {
                                padding-top: 3px;
                                writing-mode: vertical-lr;
                                font-size: 20px;
                                font-weight: 700;
                            }
                        }
                    }

                }

                .t-main-right {
                    flex: 1;
                    border-left: 2px solid #000;
                    display: flex;
                    // justify-content: space-between;
                    flex-direction: column;
                    padding: 30px 5px;
                    align-items: center;

                    .t-item {
                        margin: 50px 0;

                        display: flex;
                        justify-content: center;
                        align-items: center;
                        // padding: 5px 0;
                        border-top: 1px solid #000;
                        border-bottom: 1px solid #000;
                        // margin: 10px 0;
                        border-radius: 10px;
                        width: 30px;

                        .t-txt {
                            border-radius: 10px;
                            writing-mode: vertical-lr;
                            background-color: #000;
                            color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 5px 0;
                            font-size: 20px;
                        }
                    }
                }
            }
        }

        .four {
            flex: 1;
            border-left: 2px solid #000;
            display: flex;
            justify-content: center;

            .title {

                padding-top: 30px;
                writing-mode: vertical-lr;
                font-weight: 700;
            }
        }
    }
}
</style>